<template>
	<view class="container" v-if="dataInfo">
		<u-swiper indicatorStyle="right: 20px" keyName="url" :autoplay="true" :height="500" :list="list1" indicator
			indicatorMode="line" circular @change="e => currentNum = e.current">
			<!-- 	<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in list1" :key="index"
					:class="[index === current && 'indicator__dot--active']">
				</view>
			</view> -->
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list1.length }}</text>
			</view>
		</u-swiper>
		<view class="tool-box" v-if="isTool == 1" @click="showSheet=true">
			<image style="width: 100%;height: 100%;" src="../../static/tool.png" mode=""></image>
		</view>
		<view class="header-info">
			<view class="info-box">
				<image class="avatar" :src="dataInfo.user_avatar" mode=""></image>
				<span class="info-name">{{dataInfo.nick_name}}</span>
			</view>
			<view class="btn-gz" v-if="!dataInfo.is_atten">
				<u-button shape="circle" :customStyle="{width:'176rpx',height:'64rpx',fontSize:'32rpx'}" type="primary"
					text="关注Ta" @click="onLikeUser"></u-button>
			</view>
		</view>
		<view class="content-box">
			<view class="title">{{dataInfo.title}}</view>
			<view class="content">
				{{dataInfo.content}}
			</view>
			<view class="content-footer">
				{{dataInfo.created_time_str}}发布 · {{dataInfo.browse_total}}浏览
			</view>
			<view class="comment-box">
				<view class="total">
					共{{dataInfo.commtent_total}}条回复
				</view>
				<view class="comment-list">
					<view class="comment-item" style="margin-bottom: 20rpx;" v-for="item in commentList" :key="item.id">
						<image class="comment-avatar" :src="item.user_avatar" mode=""></image>
						<view class="comment-content">
							<view class="name">
								{{item.nick_name}}
							</view>
							<view class="content-info">
								{{item.content}}
							</view>
							<view class="comment-footer">
								<view class="left">
									<view class="date">
										{{item.created_time_str}}
									</view>
									<view class="btn" @click="onReply(item,'1')">
										回复
									</view>
								</view>
								<!-- <view class="right">
									<image class="like" src="../../static/like.png" mode=""></image>
									<view>1</view>
								</view> -->
							</view>
						</view>
						<view class="comment-item comment-replay" v-for="reply in item.replys" :key="reply.id">
							<image class="comment-avatar" :src="reply.user_avatar" mode=""></image>
							<view class="comment-content">
								<view class="name">
									{{reply.nick_name}}
								</view>
								<view class="content-info">
									{{reply.content}}
								</view>
								<view class="comment-footer">
									<view class="left">
										<view class="date">
											{{reply.created_time_str}}
										</view>
										<view class="btn" @click="onReply(reply,'2')">
											回复
										</view>
									</view>
									<!-- <view class="right">
										<image class="like" src="../../static/like.png" mode=""></image>
										<view>1</view>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="info-footer">
			<view class="comment-ipt" @click="onComment">说点什么吧~</view>
			<view class="right">
				<view class="item" @click="onLike">
					<image v-if="!dataInfo.is_like" class="img" src="@/static/like.png" mode=""></image>
					<image v-else class="img" src="@/static/like_cur.png" mode=""></image>
					{{dataInfo.like_total || 0}}
				</view>
				<view class="item" @click="onCollec">
					<image v-if="!dataInfo.is_collec" class="img" src="@/static/favorite.png" mode=""></image>
					<image v-else class="img" src="@/static/favorite_cur.png" mode=""></image>
					{{dataInfo.collec_total || 0}}
				</view>
				<button open-type="share" class="item btn-share">
					<image class="img" src="@/static/share.png" mode=""></image>
					<!-- {{dataInfo.browse_total || 0}} -->
				</button>
			</view>
		</view>
		<u-action-sheet @close="showSheet = false" @select="onActionSheet" round="24" cancelText="取消"
			:actions="sheetList" :show="showSheet"></u-action-sheet>
		<u-popup :show="modalShow" mode="bottom" @close="onClose(1)">
			<view class="popup-wrap">
				<view class="popup-header">
					<text style="flex: 1;">说点什么吧</text>
					<u-button shape="circle" :customStyle="{width:'176rpx',height:'64rpx',fontSize:'32rpx'}"
						type="primary" text="发送" @click="onClose(0)"></u-button>
				</view>
				<view class="popup-content-box">
					<u--textarea :border="false" v-model="content" placeholder="请输入内容"></u--textarea>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		components: {

		},
		data() {
			return {
				showSheet: false,
				currentNum: 0,
				sheetList: [{
					id: 0,
					name: '删除',
					color: '#000000',
					fontSize: '17'
				}, {
					id: 1,
					name: '仅自己可见',
					color: '#000000',
					fontSize: '17'
				}],
				modalShow: false,
				current: 0,
				list1: [],
				dataInfo: null,
				id: '',
				content: '',
				commentList: null,
				com_id: '',
				reply_com_id: '',
				type: '',
				isTool: 0

			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onShow() {

		},
		onLoad(options) {
			this.id = options.id
			this.type = options.type
			if (options.isTool) {
				this.isTool = options.isTool
			}
			if (options.type == 2) {
				uni.setNavigationBarTitle({
					title: '祭奠详情'
				})
			}

			this.loadData();
		},

		destroyed() {

		},
		methods: {
			onActionSheet(e) {
				if (e.id == 0) {
					uni.showModal({
						title: '删除',
						content: '是否删除',
						success: (res) => {
							if(res.confirm){
								// 删除
								this.$Net.delete(this.$api.user_post_del + "/" + this.id, {
								
								}, 1).then(res => {
									this.$Msg.Toast('删除成功')
									this.$Jump.Back()
								})
							}
						}
					})

				} else {
					// 可见状态修改
					this.$Net.get(this.$api.user_post_hide + "/" + this.id, {

					}, 1).then(res => {
						this.loadData()
						this.$Msg.Toast('设置成功')
					})
				}
			},
			loadData(status = true) {
				if (this.type == 3) {
					this.get_article_details();
				} else {
					this.get_user_post_detail()
				}
				if (status) {
					this.post_comments();
				}
			},
			onReply(c, index) {
				if (index == '1') {
					this.com_id = c.id;
				} else {
					this.com_id = c.com_id;
				}
				this.reply_com_id = c.reply_com_id;
				this.modalShow = true;
			},
			// 评论列表
			post_comments() {
				this.$Net.get(this.$api.post_comments, {
					post_id: this.id,
				}, 1).then(res => {
					this.commentList = res.list;
				})
			},
			// 评论
			post_publish_comment() {
				this.$Net.post(this.$api.post_publish_comment, {
					content: this.content,
					com_id: this.com_id,
					post_id: this.id,
					reply_com_id: this.reply_com_id,
					group_id: this.dataInfo.group_id
				}, 1).then(res => {
					this.modalShow = false;
					this.$Msg.Toast('评论成功')
					this.content = ""
					this.loadData();
				})
			},
			// 关注用户
			onLikeUser() {
				// user_atten
				this.$Net.get(this.$api.user_atten + "/" + this.dataInfo.created_uid, {

				}, 1).then(res => {
					this.$Msg.Toast('关注成功')
					this.loadData(false);
				})
			},
			onLike() {
				// 点赞动态
				this.$Net.get(this.$api.user_like + "/" + this.id, {

				}, 1).then(res => {
					if (this.dataInfo.is_like) {
						this.dataInfo.like_total--;
					} else {
						this.dataInfo.like_total++;
					}
					this.$Msg.Toast(this.dataInfo.is_like ? '取消点赞成功' : '点赞成功')
					this.dataInfo.is_like = !this.dataInfo.is_like
				})
			},
			onCollec() {
				this.$Net.get(this.$api.user_collec + "/" + this.id, {

				}, 1).then(res => {
					if (this.dataInfo.is_collec) {
						this.dataInfo.collec_total--;
					} else {
						this.dataInfo.collec_total++;
					}
					this.$Msg.Toast(this.dataInfo.is_collec ? '取消收藏成功' : '收藏成功')
					this.dataInfo.is_collec = !this.dataInfo.is_collec;
					// this.dataInfo.collec_total++;

				})
			},
			onClose(index) {
				if (index == 0) {

					this.post_publish_comment();
				}
				this.modalShow = false;
			},
			onComment() {
				this.com_id = '';
				this.reply_com_id = '';
				this.modalShow = true
			},
			get_user_post_detail() {
				this.$Net.get(this.$api.user_post_detail + "/" + this.id, {

				}, 1).then(res => {

					if (res.imgs) {
						this.list1 = res.imgs.split(",").map(item => {
							return {
								url: item
							}
						})
					}
					if (res.video) {
						this.list1.unshift({
							url: res.video
						})
					}
					this.dataInfo = res;
					this.sheetList[1].name = ['设为公开可见', '仅自己可见'][res.hide]

					if (res.type == 2) {
						uni.setNavigationBarTitle({
							title: '祭奠详情'
						})
					}
				})
			},
			get_article_details() {
				this.$Net.get(this.$api.article_details + "/" + this.id, {

				}, 1).then(res => {
					if (res.imgs) {
						this.list1 = res.imgs.split(",").map(item => {
							return {
								url: item
							}
						})
					}
					if (res.video) {
						this.list1.unshift({
							url: res.video
						})
					}
					this.dataInfo = res;
					console.log('res', res);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0;

		.header-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 66rpx;
			margin-bottom: 32rpx;
			padding: 0 32rpx;

			.info-box {
				display: flex;
				align-items: center;
				color: rgba(0, 0, 0, 0.80);
				font-family: "PingFang SC";
				font-size: 32rpx;
				font-weight: 400;

				.avatar {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}
		}

		.tool-box {
			position: absolute;
			top: 20px;
			right: 10px;
			z-index: 9;
			width: 100rpx;
			height: 100rpx;
			padding: 10rpx;
		}

		.content-box {
			padding: 0 32rpx;
			padding-bottom: calc(160rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(160rpx + env(safe-area-inset-bottom));

			.title {
				color: #000;
				font-family: "PingFang SC";
				font-size: 36rpx;
				font-weight: 400;
				margin-bottom: 12rpx;
			}

			.content {
				color: rgba(0, 0, 0, 0.80);
				font-family: "PingFang SC";
				font-size: 32rpx;
				line-height: 48rpx;
				/* 150% */
				margin-bottom: 32rpx;
			}

			.content-footer {
				color: rgba(0, 0, 0, 0.40);
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-weight: 400;
			}

			.comment-box {
				border-top: 1px solid #EAEAEA;
				margin-top: 36rpx;
				padding-top: 36rpx;

				.total {
					color: rgba(0, 0, 0, 0.80);
					font-family: "PingFang SC";
					font-size: 32rpx;
					font-weight: 400;
					margin-bottom: 24rpx;
				}

				.comment-list {
					.comment-item {
						display: flex;
						// margin-bottom: 24rpx;
						width: 100%;
						flex-wrap: wrap;

						.comment-avatar {
							width: 72rpx;
							height: 72rpx;
							border-radius: 50%;
							margin-right: 14rpx;
							flex-shrink: 0;
						}

						.comment-content {
							margin: 0 12rpx;
							flex: 1;

							.name {
								color: rgba(0, 0, 0, 0.40);
								font-family: "PingFang SC";
								font-size: 28rpx;
								font-weight: 400;
								margin-bottom: 12rpx;
							}

							.content-info {
								color: rgba(0, 0, 0, 0.80);
								font-family: "PingFang SC";
								font-size: 32rpx;
								font-weight: 400;
								margin: 8rpx 0;
								word-break: break-all;
							}

							.comment-footer {
								display: flex;
								justify-content: space-between;
								align-items: center;
								width: 100%;

								.left {
									display: flex;
									align-items: center;

									.date {
										color: rgba(0, 0, 0, 0.40);
										font-family: "PingFang SC";
										font-size: 28rpx;
										font-weight: 400;
									}

									.btn {
										color: rgba(0, 0, 0, 0.80);
										font-family: "PingFang SC";
										font-size: 28rpx;
										font-weight: 400;
										margin-left: 16rpx;
									}

								}

								.right {
									display: flex;
									align-items: center;
								}

								.like {
									width: 40rpx;
									height: 40rpx;
									margin-right: 4rpx;
									color: rgba(0, 0, 0, 0.80);
									font-family: "PingFang SC";
									font-size: 28rpx;
									font-weight: 400;
								}
							}
						}

						.comment-replay {
							padding-left: 85rpx;
							margin-top: 20rpx;

							.comment-avatar {
								width: 56rpx;
								height: 56rpx;
							}
						}
					}
				}
			}
		}
	}

	.info-footer {
		padding: 32rpx 24rpx;
		padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 999;

		.comment-ipt {
			border-radius: 148rpx;
			background: #EFEFEF;
			padding: 18rpx 32rpx;
		}

		.right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 32rpx;

			.item {
				display: flex;
				align-items: center;

				.img {
					width: 64rpx;
					height: 64rpx;
					margin-right: 12rpx;
				}
			}
		}

	}

	.indicator {
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}


	.popup-header {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		width: 100%;
	}

	::v-deep .u-popup__content {
		border-radius: 20px !important;
	}

	.popup-content-box {
		padding: 0 40rpx;
		padding-bottom: calc(10rpx + constant(safe-area-inset-top)) !important;
		padding-bottom: calc(10rpx + env(safe-area-inset-top)) !important;

		::v-deep .u-textarea {
			border-radius: 24rpx;
			background: #F1F1F1;
		}
	}

	::v-deep .btn-share {
		background: transparent;
		border: none;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;

		&::after {
			display: none;
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>
